<template>
    <div class="productlist">
            <a-table  :dataSource='dataSource' :columns='columns' :rowKey='dataSource=>dataSource.id' :pagination='pagination'  @change='onChange'>
                    <template slot="states"  slot-scope="states">
                        {{states==1?"上线":"下线"}}
                    </template>
                    <span slot="action" slot-scope="text,record">
                        <a @click="getProduct(record.id)">编辑</a>
                         <a-popconfirm
                            title="确认删除?"
                            @confirm="delProduct(record.id)"
                            @cancel="cancel"
                            okText="Yes"
                            cancelText="No"
                        >
                            <a href="#">删除</a>
                         </a-popconfirm>
                    </span>
            </a-table>

            <a-drawer title="修改商品"
                :destroyOnClose = true
                :width="1200"
                @close="onClose"
                :visible="visible"
                :wrapStyle="{height: 'calc(100% - 108px)',overflow: 'auto',paddingBottom: '108px'}"
            >
                    <updateProduct :id="id"></updateProduct>
            </a-drawer>
    </div>
</template>

<script>
    import axios from "axios";
    import qs from "qs";
    import UpdateProduct from "./UpdateProduct";
    export default{
        components:{
            UpdateProduct
        },
        data(){
            return{
                visible:false,
                id:0,
                page:0,
                pagination:{
                    pageSize: 10,//每页中显示10条数据,
                    total:0,
                },
                dataSource:[],
                columns:[
                    {
                        title:"商品名",
                        dataIndex:"name",
                        key:"name",
                        align:"center"
                    },
                    {
                        title:"贩卖量",
                        dataIndex:"sale_num",
                        key:"sale_num",
                        align:"center"
                    },
                    
                     {
                        title:"热度",
                        dataIndex:"sort",
                        key:"sort",
                        align:"center"
                    },
                    {
                        title:"状态",
                        dataIndex:"states",
                        key:"states",
                        scopedSlots: { customRender: 'states' },
                        align:"center"
                    },
                    {
                        title:"创建时间",
                        dataIndex:"created_at",
                        key:"created_at",
                        align:"center"
                    },
                    {
                        title:"更新时间",
                        dataIndex:"updated_at",
                        key:"updated_at",
                        align:"center"
                    },
                    {
                        title:"操作",
                        scopedSlots: { customRender: 'action' },
                        align:"center"
                    }
                ]
              
            }
        },
        mounted(){
            this.getList(0);
        },
        methods:{
            delProduct(id){
                let param = {
                    id:id
                };
                axios.post(this.GLOBAL_.apiUrl+"10013",JSON.stringify(param)).then(
                    res=>{
                        console.log(res);
                        if(res.data.code==1){
                            this.$message.success("删除成功");
                            this.getList(this.page);
                        }else{
                            this.$message.error("删除失败");
                        }
                    }
                )
            },
            cancel(){

            },
            onClose:function(){
                this.visible = false;
                this.getList(this.page);
            },
            aaa:function(a){
                alert(a)
            },
            onChange:function(value){
                this.getList(value.current)
                this.page = value.current;
            },
            getList:function(page){
                axios.get(this.GLOBAL_.apiUrl+"00001?page="+page).then(
                    res=>{
                        if(res.data.code==1){
                            this.dataSource = res.data.data.data;
                            this.pagination.total = parseInt(res.data.data.total);
                        }else{
                            this.$message.error(res.data.msg);
                        }
                    }
                )
            },
            getProduct(id){
                this.visible = true;
                this.id = id;
                // axios.get(this.GLOBAL_.apiUrl+"10010/"+id).then(
                //     res=>{
                //         console.log(res.data);
                //     }
                // )
            }
        
        }
    }
</script>

<style scoped lang="less">
        .productlist{
           width:94%;
           margin:3em auto;
           background:#fff;
        }
</style>